<?php
echo $this->loadJs();
echo $this->loadCss();
echo $this->headScript()->appendFile($this->baseUrl() . "/js/admin/laboratorio/laboratorio.js")
        ->appendFile($this->baseUrl() . "/js/jquery-ui-timepicker-0.3.3/jquery.ui.timepicker.js")
        ->appendFile($this->baseUrl() . "/js/jquery.validate.js")
        ->appendFile($this->baseUrl() . "/js/sglide.js");
echo $this->headLink()
        ->setIndent('  ')
        ->prependStylesheet($this->baseUrl() . "/css/admin/laboratorio/laboratorio.css")
        ->prependStylesheet($this->baseUrl() . "/js/jquery-ui-timepicker-0.3.3/jquery.ui.timepicker.css");
?>
<?php
$this->subtitulo = "Modificar Laboratorios";
?>
<head>
    <style>
        #feedback  { font-size: 1.4em; }
        #days  .ui-selecting { background:  #FECA40 ; }
        #days  .ui-selected { background:  #F39814 ; color: white; }
        #days  { list-style-type: none; margin: 0; padding: 0; width: 90%; }
        #days  li { margin: 1px; padding: 1px; float: left; width: 40px; height: 25px; font-size: 1.1em; text-align: center; }

        .slider_bar {
            background-color: #D6D6D6;
        }
    </style>
    <script>
        var stateSelectable = false;

        $(document).ready(function() {
            $('#hora-inicio').timepicker({
                showPeriodLabels: false,
                showLeadingZero: true,
                hourText: 'Hora', // Define the locale text for "Hours"
                minuteText: 'Minuto', // Define the locale text for "Minute"
                amPmText: ['am', 'pm'], // Define the locale text for periods
                hours: {
                    starts: 0, // First displayed hour
                    ends: 23                  // Last displayed hour
                },
                minutes: {
                    starts: 0, // First displayed minute
                    ends: 55, // Last displayed minute
                    interval: 5, // Interval of displayed minutes
                    manual: []                // Optional extra entries for minutes
                }
            });

            $('#hora-fin').timepicker({
                showPeriodLabels: false,
                showLeadingZero: true,
                hourText: 'Hora', // Define the locale text for "Hours"
                minuteText: 'Minuto', // Define the locale text for "Minute"
                amPmText: ['am', 'pm'] // Define the locale text for periods
            });

            var seleccionados = $('#dias-guardados').val().split(',');

            for (i = 0; i < 7; i++) {
                if (seleccionados[i] === 'Do') {
                    $('#domingo').prop('checked', true);
                }
                if (seleccionados[i] === 'Lu') {
                    $('#lunes').prop('checked', true);
                }
                if (seleccionados[i] === 'Ma') {
                    $('#martes').prop('checked', true);
                }
                if (seleccionados[i] === 'Mi') {
                    $('#miercoles').prop('checked', true);
                }
                if (seleccionados[i] === 'Ju') {
                    $('#jueves').prop('checked', true);
                }
                if (seleccionados[i] === 'Vi') {
                    $('#viernes').prop('checked', true);
                }
                if (seleccionados[i] === 'Sa') {
                    $('#sabado').prop('checked', true);
                }
            }

            $('#todos').change(function() {
                var dias = new Array('#domingo', '#lunes', '#martes', '#miercoles', '#jueves', '#viernes', '#sabado');
                if ($('#todos').is(':checked')) {
                    for (i = 0; i < 7; i++) {
                        $(dias[i]).val('sel');
                        $(dias[i]).attr('readonly', 'readonly');
                        $(dias[i]).attr('disabled', 'disabled');
                        $(dias[i]).prop('checked', true);
                    }
                } else {
                    for (i = 0; i < 7; i++) {
                        $(dias[i]).val('');
                        $(dias[i]).prop('checked', false);
                        $(dias[i]).removeAttr('disabled');
                        $(dias[i]).removeAttr('readonly');
                    }
                }
            });
        });

    </script>
</head>

<div id="main-lab-container">
    <div id="general-data">
        <input type="hidden" id="dias-guardados" value="<?php echo $this->diasGuardados; ?>"/>
        <div id="general-data-header" class="btn input-block-level btn-primary btn-large" onclick="$('#general-data-container').toggle('slow');"><strong>Datos generales</strong></div>
        <div id="general-data-container" class="data-container">
            <form id="general-data-form">
                <input type="hidden" id="codigo-laboratorio" value="<?php echo $this->codigoLaboratorio; ?>"/>
                <input type="hidden" id="codigo-proyecto" value="<?php echo $this->codigoProyecto; ?>"/>
                <legend>Descripci&oacute;n del curso</legend>
                <div id="general-data" class="row-fluid">
                    <div class="span6">
                        <div class="span2"></div>
                        <label class="span4" for="codigo-area-academica">&Aacute;rea académica</label>
                        <select class="input-block-level span6" id="codigo-area-academica" name="codigo-area-academica"></select>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="span2"></div>
                        <label class="span4" for="nombre-laboratorio">Nombre</label>
                        <input type="text" id="nombre-laboratorio" name="nombre-laboratorio" class="input-block-level span6" value="<?php echo $this->nombre; ?>"/>
                    </div>
                    <div class="span6">
                        <label class="span4" for="nombre-mostrar-laboratorio">Nombre mostrar</label>
                        <input type="text" id="nombre-mostrar-laboratorio" name="nombre-mostrar-laboratorio" class="input-block-level span6" value="<?php echo $this->nombreMostrar; ?>"/>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="span2"></div>
                        <label class="span4" for="descripcion-laboratorio">Descripci&oacute;n</label>
                        <input type="text" id="descripcion-laboratorio" name="descripcion-laboratorio" class="input-block-level span6" value="<?php echo $this->descripcion; ?>"/>
                    </div>
                    <!--div class="span6">
                        <label class="span4" for="descripcion-laboratorio">VM por Alumnos:</label>                        
                        <input type="text" id="vmalumnos-laboratorio" name="vmalumnos-laboratorio" class="input-block-level span1" maxlength="1" size="1" value="<?php echo $this->vmalumno; ?>"/>                        
                    </div-->
                </div>

                <legend>Vigencia y horario del curso</legend>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="span2"></div>
                        <label class="span3" for="fecha-inicio">Fecha inicio</label>
                        <input type="text" id="fecha-inicio" name="fecha-inicio" class="input-block-level span5" value="<?php echo $this->fechaInicio; ?>"/>
                    </div>
                    <div class="span6">
                        <label class="span3" for="fecha-fin">Fecha fin</label>
                        <input type="text" id="fecha-fin" name="fecha-fin" class="input-block-level span5" value="<?php echo $this->fechaFin; ?>"/>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="span2"></div>
                        <label class="span3" for="hora-inicio">Hora Inicio</label>
                        <input class="input-block-level span5" type="text" name="hora-inicio" id="hora-inicio" placeholder="HH:mm" value="<?php echo $this->horaInicio; ?>">
                    </div>
                    <div class="span6">                        
                        <label class="span3" for="hora-fin">Hora Fin</label>
                        <input class="input-block-level span5" type="text" name="hora-fin" id="hora-fin" placeholder="HH:mm" value="<?php echo $this->horaFin; ?>">
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span1"></div>
                    <label class="span2">D&iacute;as permitidos</label>
                    <div class="span7">
                        <table class="table table-striped table-responsive table-hover">
                            <tr><th>Dom</th><th>Lun</th><th>Mar</th><th>Mi&eacute;</th><th>Jue</th><th>Vie</th><th>S&aacute;b</th><th>Todos</th></tr>
                            <tr id="permitidos" >
                                <td><input type="checkbox" id="domingo" name="domingo" value="S"/></td>
                                <td><input type="checkbox" id="lunes" name="lunes" value="S"/></td>
                                <td><input type="checkbox" id="martes" name="martes" value="S"/></td>
                                <td><input type="checkbox" id="miercoles" name="miercoles" value="S"/></td>
                                <td><input type="checkbox" id="jueves" name="jueves" value="S"/></td>
                                <td><input type="checkbox" id="viernes" name="viernes" value="S"/></td>
                                <td><input type="checkbox" id="sabado" name="sabado" value="S"/></td>
                                <td><input type="checkbox" id="todos" name="todos" value="S"/></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="span2"></div>
                        <button onclick="saveLaboratorio();" id="btn-save-general-data" class="btn btn-inverse span3">Enviar</button>
                        <button id="btn-limpiar-general-data" class="btn btn-inverse span3">Limpiar</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <div id="members" >
        <div id="members-header" class="btn input-block-level btn-primary btn-large" onclick="showMembers()">
            <strong>Profesores encargados</strong>
        </div>

        <div id="members-container" class="data-container" style="display: none">
            <input type="hidden" id="username-profesor" name="username-profesor" value="<?php echo $this->profe ?>">
            <legend>Docentes del curso</legend>
            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span3">
                    <select name="teacher-from" id="teacher-from" multiple size="5">
                    </select>
                </div>
                <div class="span2">
                    <button class="btn-mini" id="btn-add-teacher"><i class="icon-plus-sign"></i>  Agregar</button>
                    <br>
                    <button class="btn-mini" id="btn-remove-teacher"><i class="icon-minus-sign"></i>  Remover</button>
                </div>
                <div class="span3">
                    <select name="teacher-to" id="teacher-to" multiple size="5">
                    </select>
                </div>
                <div class="span1"></div>
            </div>
            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span3">
                    <button onclick="saveProfesores();" id="btn-save-members" class="btn btn-inverse">Enviar profesores</button>
                </div>
            </div>    
        </div>

    </div>
    <div id="network" >        
        <div id="network-header" class="btn input-block-level btn-primary btn-large" onclick="showNetwork()"><strong>Configuraci&oacute;n de red</strong></div>
        <div id="network-container" style="display: none" class="data-container">
            <input type="hidden" id="codigo-network" value="<?php echo $this->view->codigoNetwork; ?>"/>
            <legend>Gateway y m&aacute;scara de sub-red</legend>
            <!--            <div class="row-fluid">
                            <div class="span6">
                                <div class="span2"></div>
                                <label class="span4" for="ip-asignada">IP asignada</label>
                                <input readonly="true" type="text" class="input-block-level span6" id="ip-asignada" name="ip-asignada"/>
                            </div>
                        </div>-->
            <div class="row-fluid">
                <div class="span6">
                    <div class="span2"></div>
                    <label class="span4" for="gateway">Gateway (IP address)</label>
                    <input class="span6 input-block-level" value="<?php echo $this->ipAddress; ?>" type="text" class="input-block-level" id="gateway" name="gateway"/>
                </div>
                <div class="span6">
                    <label class="span4" for="netmask">M&aacute;scara de subred</label>
                    <input class="span6 input-block-level" value="<?php echo $this->netmask; ?>"  type="text" class="input-block-level" id="netmask" name="netmask"/>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span6">
                    <div class="span2"></div>
                    <button onclick="createNetwork();" id="btn-create-network" class="btn btn-inverse span3">Crear red</button>
                </div>
            </div>
        </div>
    </div>
    <div id="machines" >
        <div id="machines-header" class="btn input-block-level btn-primary btn-large" onclick="showMachines();"><strong>Agregar m&aacute;quinas virtuales</strong></div>
        <div id="machines-container" style="display: none">
            <input type="hidden" id="dias-encendido"/>
            <form class="form-horizontal" id="machines-form">
                <fieldset>
                    <legend>Hardware</legend>
                    <input id="tipo-plantilla" name="tipo-plantilla" value="0" type="hidden"/>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="row-fluid">
                                <div class="span12">
                                    <label class="span4" for="plantilla">Plantilla</label>
                                    <select class="input-block-level span8" id="plantilla" name="plantilla"></select>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span12">
                                    <td><label class="span4" for="service-offering">Hardware</label>
                                    <td><select class="input-block-level span8" id="service-offering" name="service-offering">
                                        </select>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span12">
                                    <td><label class="span4" for="disk-offering">Almacenamiento</label>
                                    <td><select class="input-block-level span8" id="disk-offering" name="disk-offering"></select>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span8">
                                    <div class="span2"></div>
                                    <button id="btn-add-vm" class="btn btn-inverse span6">Agregar al grupo <i class="icon-white icon-arrow-down"></i></button>
                                    <!--button id="cancel-deploy" class="btn btn-inverse span6"><i class="icon-"></i></button-->
                                </div>
                            </div>
                        </div>
                        <div id="graficos" class="span6">

                        </div>
                    </div>
                </fieldset>
            </form>
            <legend>Grupo de m&aacute;quinas virtuales</legend>
            <div class="row-fluid">
                <div class="span8">
                    <table id="assigned-vm-table" class="table table-striped">

                        <tbody>
                            <tr><th></th><th>Software base</th><th>Hardware</th><th>Almacenamiento</th></tr>
                        </tbody>
                    </table>
                </div>
                <div class="span4">
                    <div class="row-fluid" style="padding-top: 30px;">
                        <div class="span6">
                            <input type="text" placeholder="# cantidad" id="cantidad-grupo" name="cantidad-grupo" class="input-small"/>
                        </div>
                        <div class="span6">
                            Asignable <input type="checkbox" id="asignable" name="asignable">
                        </div>
                    </div>
                </div>
            </div>
            <div id="machines-deploy" class="row-fluid">
                <div class="span3">
                    <button name="btn-deploy" id="btn-deploy" class="btn btn-inverse span6">Crear grupo</button>
                </div>
            </div>
            <legend>Grupo de m&aacute;quinas asignados</legend>
            <div class="row-fluid">
                <div class="span12">
                    <table id="groups-created" class="table table-striped">
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>